<template>
  <div>
    <van-nav-bar title="注册" @click-right="goBack">
      <template #right>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="form.name"
            required
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ validator, message: '请输入姓名' }]"
          />
          <van-field
            v-model="form.age"
            required
            label="年龄"
            placeholder="请输入年龄"
            :rules="[{ validator, message: '请输入年龄' }]"
          />
        </van-cell-group>
        <van-field name="radio" label="性别" :rules="[{ validator, message: '请选择性别' }]">
          <template #input>
            <van-radio-group v-model="form.gender" direction="horizontal">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-cell-group>
          <van-field
            v-model="form.loginName"
            required
            label="用户名"
            placeholder="请输入用户名"
            @blur="verifyLoginName"
            :rules="[{ validator, message: '请输入用户名' }]"
          />
          <van-field
            v-model="form.loginKey"
            required
            label="密码"
            :right-icon="flage?'eye-o':'closed-eye'"
            :type="flage?'password':''"
            placeholder="请输入密码"
            :rules="[{ validator, message: '请输入密码' }]"
            @click-right-icon="onPassword"
          />
        </van-cell-group>
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.edu"
          label="学历"
          placeholder="点击学历"
          :rules="[{ validator, message: '请选择学历' }]"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          label="选择头像"
          type="file"
          accept="image/*"
          multiple
          v-model="avatar"
          @change="doUpload"
        />
        <van-field
          v-model="form.introduction"
          rows="4"
          autosize
          type="textarea"
          placeholder="个人简介"
          class="introduction"
          :rules="[{ validator, message: '请输入简介' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { upLoad, register, verifyLoginName } from "../api/user";
import { Toast } from "vant";

export default {
  name: "register",
  data() {
    return {
      form: {},
      avatar: "",
      columns: ["小学", "初中", "高中", "大专", "大学"],
      showPicker: false,
      flage: true
    };
  },
  methods: {
    validator(val) {
      let str = val || "";
      return str.trim() !== "";
    },
    async doUpload(e) {
      const file = e.target.files[0];
      let fd = new window.FormData();
      fd.append("avatar", file);
      let { data } = await upLoad(fd);
      this.form.avatar = data.data.avatar;
    },
    onConfirm(value) {
      this.form.edu = value;
      this.showPicker = false;
    },
    goBack() {
      this.$router.back();
    },
    async onSubmit() {
      await register(this.form);
      Toast.success("请等待审核");
      setTimeout(() => {
        this.$router.push({ name: "home" });
      }, 3000);
    },
    onPassword() {
      this.flage = !this.flage;
    },
    async verifyLoginName() {
      let { data } = await verifyLoginName(this.form.loginName);
      if (!data.success) {
        Toast.fail("当前用户名已被注册");
      }
    }
  }
};
</script>

<style scoped>
.content {
  position: absolute;
  top: 46px;
  bottom: 0px;
  overflow-y: auto;
  margin-left: 2.5%;
  width: 95%;
}
.introduction {
  border: 1px solid black;
  border-radius: 10px;
}
</style>